<template>
    <el-dialog @close="reset" title="新增/编辑" v-model="visible">
        <el-form ref="formRef" :model="formData" :rules="rules" label-width="80px">
            <el-form-item label="机构logo" prop="avatar">
                <el-upload :on-change="chooseImg" drag ref="upload" :auto-upload="false" :limit="1"
                    :on-exceed="() => ElMessage.warning('此处只能上传一张图片')" v-model:file-list="fileList" action="#"
                    list-type="picture-card">
                    <el-icon>
                        <Plus />
                    </el-icon>
                </el-upload>
            </el-form-item>

            <el-form-item label="机构名称" prop="title">
                <el-input v-model="formData.title" placeholder="请输入机构名称"></el-input>
            </el-form-item>
            <el-form-item label="负责人" prop="legal_person">
                <el-input v-model="formData.legal_person" placeholder="请输入负责人姓名"></el-input>
            </el-form-item>
            <el-form-item label="联系电话" prop="phone">
                <el-input maxlength="11" v-model="formData.phone" placeholder="请输入联系电话"></el-input>
            </el-form-item>
            <el-form-item label="省市区" prop="area">
                <!-- {{formData.area}} -->
                <el-cascader v-model="formData.area" :options="pcaTextArr" />
            </el-form-item>

            <el-form-item label="机构地址" prop="title">
                <el-input v-model="formData.address" placeholder="请输入机构地址"></el-input>
            </el-form-item>
            <el-form-item label="地理经度" prop="lnglat">
                <el-input v-model="formData.lnglat" placeholder="地理经纬度，用于地图定位导航"></el-input>
                <a target="_blank" href="http://api.map.baidu.com/lbsapi/getpoint/index.html">经纬度获取工具</a>
            </el-form-item>
            <el-form-item label="机构状态" prop="status">
                <el-radio-group v-model="formData.status">
                    <el-radio :value="1">启用</el-radio>
                    <el-radio :value="2">禁用</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="机构简介" prop="introduce">
                <textarea v-model="formData.introduce" class="textarea" rows="5" cols="100"
                    placeholder="机构简介"></textarea>
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button @click="reset">取消</el-button>
            <el-button type="primary" @click="submit">确认提交</el-button>
        </template>
    </el-dialog>
</template>

<script setup>
import { pcaTextArr } from 'element-china-area-data'
import { ref, getCurrentInstance } from 'vue'
import { businessAdd, businessUpdate } from '@/utils/api'
import { ElMessage } from 'element-plus';
const { appContext: { config: { globalProperties: { baseUrl } } } } = getCurrentInstance()
const emit = defineEmits(['updateBusiness'])
const initFormData = {
    title: '',
    legal_person: '',
    // 省市区
    area: [],
    address: '',
    logo: null,
    phone: '',
    status: '',
    lnglat: '',
    introduce: '',
}
const visible = ref(false)
const formRef = ref(null)
// 照片列表
const fileList = ref([])
const upload = ref(null)
const formData = ref({ ...initFormData })
const chooseImg = ({ raw }) => {
    formData.value.logo = raw
}
// 接收待编辑菜单数据
const getEditData = (data) => {
    formData.value = { ...data }
    const { province, city, county } = data
    formData.value.area = [province, city, county]
    visible.value = true
    fileList.value = [{ url: baseUrl + data.logo }]
}
const rules = {
    title: { required: true, message: '请输入机构名称', trigger: 'blur' },
    legal_person: { required: true, message: '请输入负责人姓名', trigger: 'blur' },
    phone: { required: true, message: '请输入联系电话', trigger: 'blur' },
    area: { required: true, message: '请选择省市区', trigger: 'blur' },
    address: { required: true, message: '请输入地址', trigger: 'blur' },
    status: { required: true, message: '请选择机构状态', trigger: 'blur' },
    lnglat: { required: true, message: '请输入地理经纬度', trigger: 'blur' }
}
// 重置数据
const reset = () => {
    // 重置表单
    formRef.value.resetFields()
    formData.value = { ...initFormData }
    // 关闭对话框
    visible.value = false
    // 删除id, 否则之后的操作会收到影响
    delete formData.value.id
    // 移除upload组件中用户选择的图片
    upload.value.clearFiles()
}
const submit = () => {
    formRef.value.validate(async valid => {
        if (valid) {
            let res
            const fd = new FormData()
            const [province, city, county] = formData.value.area
            formData.value.province = province
            formData.value.city = city
            formData.value.county = county
            delete formData.value.area
            for (let key in formData.value) {
                if (formData.value[key]) {
                    fd.append(key, formData.value[key])
                }
            }
            if (formData.value.id > 0) {
                res = await businessUpdate(fd);
            } else {
                res = await businessAdd(fd);
            }
            const { data } = res
            if (data.code === 200) {
                ElMessage.success(data.msg)
                // 重置表单
                formRef.value.resetFields()
                // 关闭对话框
                visible.value = false
                // 删除id, 否则之后的操作会收到影响
                delete formData.value.id
                // 通知父组件更新
                emit('updateBusiness')
            } else {
                ElMessage.error(data.msg)
            }
        }
    })
}



defineExpose({ visible, getEditData })
</script>

<style lang="scss" scoed>
.textarea {
    resize: none;
    border: 1px solid #ddd;
    border-radius: 4px
}
</style>